<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>学生管理系统</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			div {
				padding: 0;
				margin: 0;
				border: none;
			}

			.tables {
				margin: 0;
				padding: 0px;
				border: none;
			}
		</style>
	</head>

	<body>
		<!--导航栏开始-->
		<div class="container">
			​
			<div>
				<h1 style="text-align: center; color: #00b3ee">学生管理系统</h1>
			</div>
			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">欢迎使用</a>
					</div>
					<div>
						<ul class="nav navbar-nav">

							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									学生信息管理
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu ">
									<li onclick="show(1,6)"><a href="#" class="dropdown-toggle">信息管理</a></li>
									<li onclick="show(2,6)"><a href="#" class="dropdown-toggle">添加学生</a></li>

								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									课程信息管理
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li onclick="show(3,6)"><a href="#">课程管理</a></li>
									<li onclick="show(4,6)"><a href="#">添加课程</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									学生成绩查询
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li onclick="show(5,6)"><a href="#">成绩管理</a></li>
									<li onclick="show(6,6)"><a href="#">添加成绩</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
			<!--导航栏结束-->

			<!--信息管理开始-->
			<div class="container" id="ii1" style="display:none">
				<div class="btn-group" role="group" aria-label="...">
					<button type="button" class="btn btn-default glyphicon glyphicon-plus"> 添加 </button>
					<button type="button" class="btn btn-default glyphicon glyphicon-pencil"> 编辑 </button>
					<button type="button" class="btn btn-default glyphicon glyphicon-trash btn btn-danger"> 删除 </button>
				</div>
				<div>
					<table class="table table-bordered tables">
						<tr>
							<th><input type="checkbox" name="select"></th>
							<th>编号</th>
							<th>学号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>出生日期</th>
							<th>所在班级</th>
							<th>电话</th>
							<th>备注</th>
							<th>修改信息</th>
							<th>删除</th>
						</tr>
						<tr>
							<td><input type="checkbox" name="select" id="all1"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#info1">修改信息</button></td>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#del1">删除</button></td>
						</tr>
					</table>
				</div>
			</div>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="info1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">修改信息</h4>
						</div>
						<div class="modal-body" id="tijiao1">
							<table>
								<form>
									<tr>
										<td>学号:</td>
										<td><input type="text" name="stuNo" /></td>
									</tr>
									<tr>
										<td>姓名:</td>
										<td><input type="text" name="username" /></td>
									</tr>
									<td> 性别:</td>
									<td><input type="radio" name="gender" value="m" id="m" checked="checked" />
										<!-- lable作用:扩充点击范围点击字触发单选 for和上面的id对应 -->
										<label for="m">男</label>
										<input type="radio" name="gender" value="f" id="f" /> <label for="f">女</label>
									</td>
									<tr>
										<td>所在班级:</td>
										<td><input type="text" name="class" /></td>
									</tr>
									<tr>
										<td>电话:</td>
										<td><input type="text" name="phone" /></td>
									</tr>
								</form>
							</table>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal">提交更改</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="del1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">注意:</h4>
						</div>
						<div class="modal-body">确定要删除吗?</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" data-dismiss="modal">确认删除</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!--信息管理结束-->
			<!--添加学生开始-->
			<div id="ii2" style="display:none">
				<form action="" method="get">
					学号:<input type="text" name="stuNo" />
					<hr>
					姓名:<input type="text" name="username" maxlength="10" />
					<hr>
					性别:<input type="radio" name="gender" value="m" id="m" checked="checked" />
					<!-- lable作用:扩充点击范围点击字触发单选 for和上面的id对应 -->
					<label for="m">男</label>
					<input type="radio" name="gender" value="f" id="f" /> <label for="f">女</label>
					<hr>
					出生日期:<input type="date" name="birthday" />
					<hr>
					所在班级:<select name="class" id="">
						<option th:each="p:${list}"></option>
					</select>
					<hr>
					电话:<input type="text" name="phone" maxlength="11" />
					<hr>
					备注:<textarea name="intro" rows="4" cols="20" placeholder="说点什么..."></textarea>
					<hr>
					<input type="submit" value="添加" class="btn btn-primary" />
				</form>
			</div>
			<!--添加学生结束-->
			<!--课程管理开始-->
			<div class="container" id="ii3" style="display:none">
				<div class="btn-group" role="group" aria-label="...">
					<button type="button" class="btn btn-default glyphicon glyphicon-plus"> 添加 </button>
					<button type="button" class="btn btn-default glyphicon glyphicon-pencil"> 编辑 </button>
					<button type="button" class="btn btn-default glyphicon glyphicon-trash btn btn-danger"> 删除 </button>
				</div>
				<div id="">
					<table class="table table-bordered tables">
						<tr>
							<th><input type="checkbox" name="select"></th>
							<th>课程编号</th>
							<th>课程名称</th>
							<th>课程类别</th>
							<th>上课地点</th>
							<th>授课教师</th>
							<th>修改信息</th>
							<th>删除</th>
						</tr>
						<tr th:each="p:${list}">
							<td><input type="checkbox" name="select" id="all2"></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#info2">修改信息</button></td>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#del2">删除</button></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="info2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改</h4>
					</div>
					<div class="modal-body">
						<table>
							<form>
								<tr>
									<td>课程名称:</td>
									<td><input type="text" name="course"></td>
								</tr>
								<tr>
									<td>课程类别:</td>
									<td><input type="text" name="classes"></td>
								</tr>
								<tr>
									<td>授课教师:</td>
									<td><input type="text" name="teacher"></td>
								</tr>
								<tr>
									<td>上课地点:</td>
									<td><input type="text" name="addr"></td>
								</tr>
							</form>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">提交更改</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="del2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">注意:</h4>
					</div>
					<div class="modal-body">确定要删除吗?</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">确认删除</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!--课程管理结束-->
		<!--添加课程-->
		<div id="ii4" class="hidden_div container" style="display: none">
			<div class="new_div_name">
			</div>
			<div>
				<form method="get" action="">

					课程名称: <input type="text" name="course">
					<hr>
					课程类别: <input type="text" name="classes">
					<hr>
					授课老师: <input type="text" name="teacher">
					<hr>
					上课地点:<input type="text" name="addr">
					<hr>
					<input type="submit" value="添加" class="btn btn-primary" />
				</form>
			</div>
		</div>
		<!--管理成绩开始-->
		<!-- 添加成绩 -->
		<div id="ii6" class="hidden_div container" style="display:none">

			<div>
				<form action="" method="get">
					选择课程:<select name="course">
						<option></option>
					</select>
					<hr>
					学号:<input type="text" name="stuNo">
					<hr>
					成绩:<input type="text" name="score">
					<hr>
					<input type="submit" value="添加" class="btn btn-primary" />
				</form>
			</div>
		</div>
		<!--成绩管理-->
		<div class="container" id="ii5" style="display:none">
			<div class="btn-group" role="group" aria-label="...">
				<button type="button" class="btn btn-default glyphicon glyphicon-plus"> 添加 </button>
				<button type="button" class="btn btn-default glyphicon glyphicon-pencil"> 编辑  </button>
				<button type="button" class="btn btn-default glyphicon glyphicon-trash btn btn-danger"> 删除  </button>
			</div>
			<div id="">
				<table class="table table-bordered tables">
					<form action="" method="get">
						<tr>
							<th><input type="checkbox" name="select"></th>
							<th>学号</th>
							<th>姓名</th>
							<th>成绩</th>
							<th>修改成绩</th>
							<th>删除</th>
						</tr>
						<tr th:each="p:${list}">
							<td><input type="checkbox" name="select" id="all3"></td>
							<td></td>
							<td></td>
							<td></td>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#info3">修改成绩</button></td>
							<td><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#del3">删除</button></td>
						</tr>
					</form>
				</table>
			</div>
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="info3"" tabindex=" -1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改</h4>
					</div>
					<div class="modal-body">
						<form name="">
							成绩:<input type="text">
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">提交更改</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="del3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">注意:</h4>
					</div>
					<div class="modal-body">确定要删除吗?</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal">确认删除</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!--管理成绩结束-->
		</div>
		<!-- 导航栏区域切换 -->
		<script>
			function show(a) {
				for (var i = 1; i <= 6; i++) {
					document.getElementById("ii" + i).style.display = 'none';
				}
				document.getElementById("ii" + a).style.display = 'block';
			}
		</script>
		<script>
			
		</script>
	</body>
	<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
	<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
	<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
	<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
	<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
	<script type="text/javascript">
		// function show(flag) {
		//     $(".hidden_div:not(" + flag + ")").css("display", "none");
		//     $(flag).css("display", "block");
		//     $("#first_page_div").css("display", "none");
		// }

		// //给所有多选框添加点击事件
		// $("input").click(function(){
		//     //判断点击的是全选
		//     //this代表触发事件的元素对象 	this是js对象
		//     if(this.id=="all"){
		//         // alert("是全选");
		//         //让其他几个多选框和全选状态一致
		//         var status = $("#all").attr("checked");
		//         $("input:not(#all)").attr("checked",status);
		//     }
		//给所有li添加点击事件
	</script>

</html>
